<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Adminox - Responsive Web App Kit</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"> 
  <meta content="Coderthemes" name="author"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <!-- App favicon --> 
  <link rel="shortcut icon" href="assets/images/favicon.ico"> 
  <!-- Nestable css --> 
  <link href="../plugins/nestable/jquery.nestable.css" rel="stylesheet"> 
  <!-- App css --> 
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/icons.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/style.css" rel="stylesheet" type="text/css"> 
  <script src="assets/js/modernizr.min.js"></script> 
 </head> 
 <body> 
  <!-- Begin page --> 
  <div id="wrapper"> 
   <!-- Top Bar Start --> 
   <div class="topbar"> 
    <!-- LOGO --> 
    <div class="topbar-left"> 
     <a href="index1.html" class="logo"> <span> <img src="assets/images/logo.png" alt="" height="25"> </span> <i> <img src="assets/images/logo_sm.png" alt="" height="28"> </i> </a>
    </div> 
    <nav class="navbar-custom"> 
     <ul class="list-inline float-right mb-0"> 
      <li class="list-inline-item dropdown notification-list"> <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="dripicons-bell noti-icon"></i> <span class="badge badge-pink noti-icon-badge">4</span> </a> 
       <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg" aria-labelledby="Preview"> 
        <!-- item--> 
        <div class="dropdown-item noti-title"> 
         <h5><span class="badge badge-danger float-right">5</span>Notification</h5> 
        </div> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-success">
          <i class="icon-bubble"></i>
         </div> <p class="notify-details">Robert S. Taylor commented on Admin<small class="text-muted">1 min ago</small></p> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-info">
          <i class="icon-user"></i>
         </div> <p class="notify-details">New user registered.<small class="text-muted">1 min ago</small></p> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-danger">
          <i class="icon-like"></i>
         </div> <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">1 min ago</small></p> </a> 
        <!-- All--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item notify-all"> View All </a> 
       </div> </li> 
      <li class="list-inline-item dropdown notification-list"> <a class="nav-link dropdown-toggle waves-effect waves-light nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle"> </a> 
       <div class="dropdown-menu dropdown-menu-right profile-dropdown " aria-labelledby="Preview"> 
        <!-- item--> 
        <div class="dropdown-item noti-title"> 
         <h5 class="text-overflow"><small>Welcome ! John</small> </h5> 
        </div> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-account-circle"></i> <span>Profile</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-settings"></i> <span>Settings</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-lock-open"></i> <span>Lock Screen</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-power"></i> <span>Logout</span> </a> 
       </div> </li> 
     </ul> 
     <ul class="list-inline menu-left mb-0"> 
      <li class="float-left"> <button class="button-menu-mobile open-left waves-light waves-effect"> <i class="dripicons-menu"></i> </button> </li> 
      <li class="hide-phone app-search"> 
       <form role="search" class=""> 
        <input type="text" placeholder="Search..." class="form-control"> 
        <a href=""><i class="fa fa-search"></i></a> 
       </form> </li> 
     </ul> 
    </nav> 
   </div> 
   <!-- Top Bar End --> 
   <!-- ========== Left Sidebar Start ========== --> 
   <div class="left side-menu"> 
    <div class="slimscroll-menu" id="remove-scroll"> 
     <!-- Sidemenu --> 
     <div id="sidebar-menu"> 
      <!-- Left Menu Start --> 
      <ul class="metismenu" id="side-menu"> 
       <li class="menu-title">Navigation</li> 
       <li> <a href="javascript: void(0);"> <i class="fi-air-play"></i><span class="badge badge-success pull-right">2</span> <span> Dashboard </span> </a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="index1.html">Dashboard 1</a></li>
         <li><a href="dashboard-2.html">Dashboard 2</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-target"></i> <span> Admin UI </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="admin-grid.html">Grid</a></li> 
         <li><a href="admin-sweet-alert.html">Sweet Alert</a></li> 
         <li><a href="admin-tiles.html">Tiles Box</a></li> 
         <li><a href="admin-nestable.html">Nestable List</a></li> 
         <li><a href="admin-rangeslider.html">Range Slider</a></li> 
         <li><a href="admin-ratings.html">Ratings</a></li> 
         <li><a href="admin-filemanager.html">File Manager</a></li> 
         <li><a href="admin-lightbox.html">Lightbox</a></li> 
         <li><a href="admin-scrollbar.html">Scroll bar</a></li> 
         <li><a href="admin-slider.html">Slider</a></li> 
         <li><a href="admin-treeview.html">Treeview</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-briefcase"></i> <span> UI Kit </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="ui-typography.html">Typography</a></li> 
         <li><a href="ui-panels.html">Panels</a></li> 
         <li><a href="ui-buttons.html">Buttons</a></li> 
         <li><a href="ui-modals.html">Modals</a></li> 
         <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li> 
         <li><a href="ui-spinners.html">Spinners</a></li> 
         <li><a href="ui-ribbons.html">Ribbons</a></li> 
         <li><a href="ui-portlets.html">Portlets</a></li> 
         <li><a href="ui-tabs.html">Tabs</a></li> 
         <li><a href="ui-progressbars.html">Progress Bars</a></li> 
         <li><a href="ui-notifications.html">Notification</a></li> 
         <li><a href="ui-carousel.html">Carousel</a> </li>
         <li><a href="ui-video.html">Video</a> </li>
         <li><a href="ui-tooltips-popovers.html">Tooltips &amp; Popovers</a></li> 
         <li><a href="ui-images.html">Images</a></li> 
         <li><a href="ui-bootstrap.html">Bootstrap UI</a></li> 
        </ul> </li> 
       <li> <a href="tickets.html"><i class="fi-help"></i><span class="badge badge-danger pull-right">New</span> <span> Tickets </span></a> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-box"></i><span> Icons </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="icons-colored.html">Colored Icons</a></li> 
         <li><a href="icons-materialdesign.html">Material Design</a></li> 
         <li><a href="icons-dripicons.html">Dripicons</a></li> 
         <li><a href="icons-fontawesome.html">Font awesome</a></li> 
         <li><a href="icons-feather.html">Feather Icons</a></li> 
         <li><a href="icons-simple-line.html">Simple line Icons</a></li> 
         <li><a href="icons-flags.html">Flag Icons</a></li> 
         <li><a href="icons-file.html">File Icons</a></li> 
         <li><a href="icons-pe7.html">PE7 Icons</a></li> 
         <li><a href="icons-typicons.html">Typicons</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-bar-graph-2"></i><span> Graphs </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="chart-flot.html">Flot Chart</a></li> 
         <li><a href="chart-morris.html">Morris Chart</a></li> 
         <li><a href="chart-google.html">Google Chart</a></li> 
         <li><a href="chart-echart.html">Echarts</a></li> 
         <li><a href="chart-chartist.html">Chartist Charts</a></li> 
         <li><a href="chart-chartjs.html">Chartjs Chart</a></li> 
         <li><a href="chart-c3.html">C3 Chart</a></li> 
         <li><a href="chart-justgage.html">Justgage Charts</a></li> 
         <li><a href="chart-sparkline.html">Sparkline Chart</a></li> 
         <li><a href="chart-knob.html">Jquery Knob</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-mail"></i><span> Email </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="email-inbox.html">Inbox</a></li> 
         <li><a href="email-read.html">Read Email</a></li> 
         <li><a href="email-compose.html">Compose Email</a></li> 
        </ul> </li> 
       <li> <a href="taskboard.html"><i class="fi-paper"></i> <span> Task Board </span></a> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-disc"></i><span class="badge badge-warning pull-right">12</span> <span> Forms </span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="form-elements.html">Form Elements</a></li> 
         <li><a href="form-advanced.html">Form Advanced</a></li> 
         <li><a href="form-layouts.html">Form Layouts</a></li> 
         <li><a href="form-validation.html">Form Validation</a></li> 
         <li><a href="form-pickers.html">Form Pickers</a></li> 
         <li><a href="form-wizard.html">Form Wizard</a></li> 
         <li><a href="form-mask.html">Form Masks</a></li> 
         <li><a href="form-summernote.html">Summernote</a></li> 
         <li><a href="form-wysiwig.html">Wysiwig Editors</a></li> 
         <li><a href="form-typeahead.html">Typeahead</a></li> 
         <li><a href="form-x-editable.html">X Editable</a></li> 
         <li><a href="form-uploads.html">Multiple File Upload</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-layout"></i> <span> Tables </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="tables-basic.html">Basic Tables</a></li> 
         <li><a href="tables-layouts.html">Tables Layouts</a></li> 
         <li><a href="tables-datatable.html">Data Tables</a></li> 
         <li><a href="tables-foo-tables.html">Foo Tables</a></li> 
         <li><a href="tables-responsive.html">Responsive Table</a></li> 
         <li><a href="tables-tablesaw.html">Tablesaw Tables</a></li> 
         <li><a href="tables-editable.html">Editable Tables</a></li> 
        </ul> </li> 
       <li class="menu-title">More</li> 
       <li> <a href="javascript: void(0);"><i class="fi-map"></i> <span> Maps </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="maps-google.html">Google Maps</a></li> 
         <li><a href="maps-google-full.html">Full Google Map</a></li> 
         <li><a href="maps-vector.html">Vector Maps</a></li> 
         <li><a href="maps-mapael.html">Mapael Maps</a></li> 
        </ul> </li> 
       <li><a href="calendar.html"><i class="fi-clock"></i> <span>Calendar</span> </a></li> 
       <li> <a href="javascript: void(0);"><i class="fi-paper-stack"></i><span> Pages </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="page-starter.html">Starter Page</a></li> 
         <li><a href="page-login.html">Login</a></li> 
         <li><a href="page-register.html">Register</a></li> 
         <li><a href="page-logout.html">Logout</a></li> 
         <li><a href="page-recoverpw.html">Recover Password</a></li> 
         <li><a href="page-lock-screen.html">Lock Screen</a></li> 
         <li><a href="page-confirm-mail.html">Confirm Mail</a></li> 
         <li><a href="page-404.html">Error 404</a></li> 
         <li><a href="page-404-alt.html">Error 404-alt</a></li> 
         <li><a href="page-500.html">Error 500</a></li> 
        </ul> </li> 
       <li class="has_sub"> <a href="javascript:void(0);"><i class="fi-marquee-plus"></i><span> Extra Pages </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="extras-about.html">About Us</a></li> 
         <li><a href="extras-contact.html">Contact</a></li> 
         <li><a href="extras-companies.html">Companies</a></li> 
         <li><a href="extras-members.html">Members</a></li> 
         <li><a href="extras-members-2.html">Membars 2</a></li> 
         <li><a href="extras-timeline.html">Timeline</a></li> 
         <li><a href="extras-invoice.html">Invoice</a></li> 
         <li><a href="extras-maintenance.html">Maintenance</a></li> 
         <li><a href="extras-coming-soon.html">Coming Soon</a></li> 
         <li><a href="extras-faq.html">FAQ</a></li> 
         <li><a href="extras-pricing.html">Pricing</a></li> 
         <li><a href="extras-profile.html">Profile</a></li> 
         <li><a href="extras-email-template.html">Email Templates</a></li> 
         <li><a href="extras-search-result.html">Search Results</a></li> 
         <li><a href="extras-sitemap.html">Site Map</a></li> 
        </ul> </li> 
       <li> <a href="todo.html"><i class="fi-layers"></i> <span> Todo </span></a> </li> 
      </ul> 
     </div> 
     <!-- Sidebar --> 
     <div class="clearfix"></div> 
    </div> 
    <!-- Sidebar -left --> 
   </div> 
   <!-- Left Sidebar End --> 
   <!-- ============================================================== --> 
   <!-- Start right Content here --> 
   <!-- ============================================================== --> 
   <div class="content-page"> 
    <!-- Start content --> 
    <div class="content"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="page-title-box"> 
         <h4 class="page-title float-left">Ratings</h4> 
         <ol class="breadcrumb float-right"> 
          <li class="breadcrumb-item"><a href="#">Adminox</a></li> 
          <li class="breadcrumb-item"><a href="#">Admin UI</a></li> 
          <li class="breadcrumb-item active">Ratings</li> 
         </ol> 
         <div class="clearfix"></div> 
        </div> 
       </div> 
      </div> 
      <!-- end row --> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="card-box"> 
         <div class="row"> 
          <div class="col-sm-4"> 
           <h4 class="header-title m-t-0">Default</h4> 
           <p class="text-muted m-b-20 font-14"> You need just to have a <code>div</code> to build the Raty. </p> 
           <div id="default"></div> 
          </div> 
          <div class="col-sm-4"> 
           <h4 class="header-title m-t-0">Score</h4> 
           <p class="text-muted m-b-20 font-14"> Used when we want to start with a saved rating. </p> 
           <div id="score"></div> 
          </div> 
          <div class="col-sm-4"> 
           <h4 class="header-title m-t-0">Score callback</h4> 
           <p class="text-muted m-b-20 font-14"> If you need to start you score depending of a dynamic value, you can to use callback for it. You can pass any value for it, not necessarily a data- value. You can use a field value for example. </p> 
           <div id="score-callback" data-score="1"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Score Name</h4> 
           <p class="text-muted m-b-20 font-14"> Changes the name of the hidden score field. </p> 
           <div id="scoreName"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Number</h4> 
           <p class="text-muted m-b-20 font-14"> Changes the number of stars. </p> 
           <div id="number"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Number callback</h4> 
           <p class="text-muted m-b-20 font-14"> You can receive the number of stars dynamic using callback to set it. </p> 
           <div id="number-callback" data-number="3"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Number Max</h4> 
           <p class="text-muted m-b-20 font-14"> Change the maximum of start that can be created. </p> 
           <div id="numberMax"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Read Only</h4> 
           <p class="text-muted m-b-20 font-14"> You can prevent users to vote. It can be applied with or without score and all stars will receives the hint corresponding of the selected star. Stop the mouse over the stars to see: </p> 
           <div id="readOnly"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Read Only callback</h4> 
           <p class="text-muted m-b-20 font-14"> You can decide if the rating will be readOnly dynamically returning true of false on callback. </p> 
           <div id="readOnly-callback" data-number="3"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">No Rated Message</h4> 
           <p class="text-muted m-b-20 font-14"> If readOnly is enabled and there is no score, the hint "Not rated yet!" will be shown for all stars. But you can change it. Stop the mouse over the star to see: </p> 
           <div id="noRatedMsg"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Half Show</h4> 
           <p class="text-muted m-b-20 font-14"> You can represent a float score as a half star icon. </p> 
           <div id="halfShow-true"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Half Show <small>Disabled</small></h4> 
           <p class="text-muted m-b-20 font-14"> You can decide if the rating will be readOnly dynamically returning true of false on callback. </p> 
           <div id="halfShow-false"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Round</h4> 
           <p class="text-muted m-b-20 font-14"> We changed the default interval [x.25 .. x.76], now x.26 will round down instead of to be a half star. Remember that the full attribute is used only when halfShow is disabled. </p> 
           <div id="round"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Half</h4> 
           <p class="text-muted m-b-20 font-14"> Enables the half star mouseover to be possible vote with half values. </p> 
           <div id="half"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Star Half</h4> 
           <p class="text-muted m-b-20 font-14"> Changes the name of the half star. </p> 
           <div id="starHalf"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Click</h4> 
           <p class="text-muted m-b-20 font-14"> Callback to handle the score and the click event on click action. You can mension the Raty element (DOM) itself using this. </p> 
           <div id="click"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Hints</h4> 
           <p class="text-muted m-b-20 font-14"> Changes the hint for each star by it position on array. </p> 
           <div id="hints"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Star Off and Star On</h4> 
           <p class="text-muted m-b-20 font-14"> Changes the name of the star on and star off. </p> 
           <div id="star-off-and-star-on"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Cancel</h4> 
           <p class="text-muted m-b-20 font-14"> Add a cancel button on the left side of the stars to cacel the score. Inside the click callback the argument code receives the value null when we click on cancel button. </p> 
           <div id="cancel"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Cancel Hint</h4> 
           <p class="text-muted m-b-20 font-14"> Like the stars, the cancel button have a hint too, and you can change it. </p> 
           <div id="cancelHint"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Cancel Place</h4> 
           <p class="text-muted m-b-20 font-14"> Changes the cancel button to the right side. </p> 
           <div id="cancelPlace"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Cancel off and Cancel On</h4> 
           <p class="text-muted m-b-20 font-14"> Changes the on and off icon of the cancel button. </p> 
           <div id="cancel-off-and-cancel-on"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Icon Range</h4> 
           <p class="text-muted m-b-20 font-14"> It's an array of objects where each one represents a custom icon. The range attribute is until wich position the icon will be displayed. </p> 
           <div id="iconRange"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Size</h4> 
           <p class="text-muted m-b-20 font-14"> The size of the icons are controlled by the css property font-size as all icons are text. The plugin tries to calculate the font size automatically, but should that fail, you can provide a size (in pixels) with the size option. </p> 
           <div id="size-md" class="rating-md"></div> 
           <div id="size-lg" class="rating-lg m-t-20"></div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Target</h4> 
           <p class="text-muted m-b-20 font-14"> Some place to display the hints or the cancelHint.<b id="target-div-hint"></b> </p> 
           <div id="target-div"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Target Type</h4> 
           <p class="text-muted m-b-20 font-14"> You have the option hint or score to chosse. <b id="targetType-hint" class="label label-success"></b> </p> 
           <div id="targetType"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Target Format</h4> 
           <p class="text-muted m-b-20 font-14"> You can choose a template to be merged with your hints and displayed on target. </p> 
           <div class="text-xs-center"> 
            <div id="targetFormat" class="rating-md"></div> 
            <input type="text" class="form-control" id="targetFormat-hint"> 
           </div> 
          </div> 
         </div> 
         <!-- end row --> 
         <div class="row m-t-50"> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Mouseover</h4> 
           <p class="text-muted m-b-20 font-14"> You can handle the action on mouseover. </p> 
           <div id="mouseover"></div> 
          </div> 
          <div class="col-sm-4 m-t-20"> 
           <h4 class="header-title m-t-0">Mouseout</h4> 
           <p class="text-muted m-b-20 font-14"> You can handle the action on mouseout. </p> 
           <div id="mouseout"></div> 
          </div> 
         </div> 
         <!-- end row --> 
        </div> 
       </div> 
      </div> 
      <!-- end row --> 
     </div> 
     <!-- container --> 
    </div> 
    <!-- content --> 
    <footer class="footer text-right">
      2017 © Adminox. - Coderthemes.com 
    </footer> 
   </div> 
   <!-- ============================================================== --> 
   <!-- End Right content here --> 
   <!-- ============================================================== --> 
  </div> 
  <!-- END wrapper --> 
  <!-- jQuery  --> 
  <script src="assets/js/jquery.min.js"></script> 
  <script src="assets/js/tether.min.js"></script>
  <!-- Tether for Bootstrap --> 
  <script src="assets/js/bootstrap.min.js"></script> 
  <script src="assets/js/metisMenu.min.js"></script> 
  <script src="assets/js/waves.js"></script> 
  <script src="assets/js/jquery.slimscroll.js"></script> 
  <!-- Rating js --> 
  <script src="../plugins/raty-fa/jquery.raty-fa.js"></script> 
  <!-- page init --> 
  <script src="assets/pages/jquery.rating.js"></script> 
  <!-- App js --> 
  <script src="assets/js/jquery.core.js"></script> 
  <script src="assets/js/jquery.app.js"></script>  
 </body>
</html>